<template>
 <el-popover
    v-model="isShow"
    ref="myPopover"
    :popper-class="popperClass"
    placement="bottom-start"
    transition="el-zoom-in-top"
    trigger="click">
    <el-input  slot="reference" :style="{ width: width + 'px' }" 
    :placeholder="placeholder" ref="input" readonly  :clearable="clearable"
    @mouseover.native="mouseover"  @mouseout.native="mouseout"
    style="cursor:pointer" v-model="text">
        <i slot="suffix" class="el-select__caret el-input__icon el-icon-circle-close" v-if="showClearable" @click.stop="clear"></i>
        <i slot="suffix" class="el-select__caret el-input__icon el-icon-arrow-up"  v-else  
        :class="{ 'is-reverse' : isShow}"></i>
    </el-input>
      <div class="quarterly-picker__content">
        <div class="quarterly-picker__header">
          <el-button type="text" aria-label="上一季度" icon="el-icon-d-arrow-left" @click="pre"></el-button>
          <span class="quarterly-picker__header-label">{{ currentYear }}年</span>
          <el-button type="text" aria-label="下一季度" icon="el-icon-d-arrow-right" @click="next"></el-button>
        </div>
        <div class="quarterly-picker__body">
          <div class="item" v-for="(item,index) in list" 
          :class="{ 
            'active' : item.startTime === (cur && cur.startTime),
            'current-quarter': item.id === currentQuarter && item.year === $moment().year()
          }"
          :key="index" @click="change(item)">
            {{ item.name }}
          </div>
        </div>
      </div>
</el-popover>
</template>

<script>
export default {
  name: 'QuarterlyPicker',
  model: {
    event: 'change'
  },
  props: {
    clearable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择季度'
    },
    width: {
      type: Number,
      default: 200
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    value: {
      handler(n) {
        if (n.length) {
          this.currentYear = this.$moment(n[0]).year();
          const curQuarter = this.$moment(n[0]).quarter();
          this.cur = this.list.find(v => v.id === curQuarter);
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      currentYear: this.$moment().year(), // 当前年,
      currentQuarter: this.$moment().quarter(), // 当前季度
      showClearable: false,
      isShow: false,
      checkedNodes: [],
      filterText: '',
      defaultExpandedKeys: [],
      index: 0,
      id: '',
      cur: null
    };
  },
  computed: {
    popperClass() {
      if (this.layoutSkin === 'dark') {
        return 'quarterly-picker-popover quarterly-picker-popover--dark';
      } else {
        return 'quarterly-picker-popover';
      }
    },
    layoutSkin: {
      get() { return this.$store.state.common.layoutSkin; }
    },
    text() {
      if (this.cur) {
        return this.cur.year + '年' + this.cur.name;
      }
    },
    list() {
      const year = this.currentYear;
      const list = [
        { name: '第一季度', id: 1, startTime: `${year}-01-01`, endTime: `${year}-03-31`, year },
        { name: '第二季度', id: 2, startTime: `${year}-04-01`, endTime: `${year}-06-30`, year },
        { name: '第三季度', id: 3, startTime: `${year}-07-01`, endTime: `${year}-09-30`, year },
        { name: '第四季度', id: 4, startTime: `${year}-10-01`, endTime: `${year}-12-31`, year }
      ];
      return list;
    }
  },
  methods: {
    pre() {
      this.currentYear = this.$moment(this.currentYear + '').add(-1, 'y').year();
    },
    next() {
      this.currentYear = this.$moment(this.currentYear + '').add(1, 'y').year();
    },
    change(item) {
      // console.log(item);
      this.cur = item;
      this.isShow = false;
      this.$emit('change', [item.startTime, item.endTime]);
    },
    mouseover() {
      if (this.clearable && this.text) {
        this.showClearable = true;
      } else {
        this.showClearable = false;
      }
    },
    mouseout() {
      this.showClearable = false;
    },
    clear() {

    }
  }
};
</script>
<style lang="scss" scoped>
   .el-select__caret {
      color: #c0c4cc;
      font-size: 14px;
      transition: transform .3s;
      transform: rotate(180deg);
      cursor: pointer;
    }
    .el-select__caret.is-reverse {
      transform: rotate(0deg);
    }
   
</style>
<style lang="scss">
.quarterly-picker{
  &__header{
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-label{
      font-size: 16px;
      // font-weight: 500;
      padding: 0 5px;
      line-height: 22px;
      text-align: center;
      cursor: pointer;
      color: #606266;
    }
  }

  &-popover{
    padding: 0;
    .popper__arrow{
      left: 35px !important;
    }
    &--dark{
      .item{
        color:white
      }
      .quarterly-picker__header-label{
        color: white;
      }
    }
  }

  &__content{
    margin: 12px;
    display: flex;
    cursor: pointer;
    flex-direction: column;

  }

  &__body{
    display: flex;
    .item{
      padding: 10px;
    }
    .item:hover{
      color:#00C0FF;
    }
    .current-quarter{
        color:#00C0FF;
    }
    .active{
        color:#00C0FF;
        font-weight: bold;
    }
  }
}
</style>